前端
后端
AI
随笔
前端
后端
AI
随笔

一、Cookie：传统但不落伍的老前辈

Cookie 是浏览器存储的“元老”，诞生于互联网早期。它就像一位记性不太好的长辈，虽然容量有限（通常只有 4 KB），但在某些场景下依然不可替代。

1. 怎么用？

设置一个 Cookie 并不复杂，但需要注意它的格式和属性，比如过期时间和路径：

// 设置一个 7 天后过期的 Cookie
let days = 7
let date = new Date()
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
document.cookie = 'username=小明; expires=' + date.toUTCString() + '; path=/'

读取 Cookie 就稍微麻烦点，需要自己解析字符串：

// 获取指定名称的 Cookie
function getCookie(name) {
  const cookies = document.cookie.split('; ')
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split('=')
    if (cookieName === name) {
      return cookieValue
    }
  }
  return null
}

2. 特点

  • 容量小：通常只有 4 KB，适合存少量数据，比如用户 ID 或简单令牌。
  • 随请求发送：每次 HTTP 请求都会自动携带同源的 Cookie，方便服务器读取，但也增加了网络流量。
  • 可设置过期时间：可以手动指定失效时间，默认是会话结束时清除。
  • 服务器可操控：后端可以通过响应头设置 Cookie，实现身份验证等功能。

3. 应用场景

Cookie 特别适合需要服务器参与的场景，比如：

  • 用户登录状态：存储会话 ID（如 session_id），让服务器验证用户身份。
  • 个性化推荐：记录用户浏览习惯，供后端分析。
  • 跨页面共享：在同源页面间传递少量信息。

注意：由于 Cookie 会随请求发送，敏感信息需要加密存储，避免泄露。

二、SessionStorage：短命但高效的临时工

SessionStorage 是浏览器的“短期记忆”，它的生命周期和标签页绑定，一旦标签页关闭，数据就清空。

1. 怎么用？

SessionStorage 的 API 简单直接，存取数据就像操作一个键值对：

// 存储购物车数据
sessionStorage.setItem('cart', JSON.stringify(['苹果', '香蕉']))
// 读取数据
const cart = JSON.parse(sessionStorage.getItem('cart'))

2. 特点

  • 容量稍大：通常有 5 MB 左右，够存一些复杂数据。
  • 临时存储：标签页关闭后数据立即清除，适合临时场景。
  • 标签页隔离：不同标签页的 SessionStorage 互不干扰。
  • 不发送到服务器：数据只在前端使用，减少网络开销。

3. 应用场景

SessionStorage 适合那些“用完即丢”的场景，比如：

  • 表单数据保存：用户填写多页表单时，临时保存数据，防止页面刷新丢失。
  • 一次性引导：新用户打开网站时，存储引导状态，避免重复显示引导页面。
  • 临时缓存：在单页应用中，临时保存页面状态，刷新后无需保留。

三、LocalStorage：稳如泰山的长期存储

LocalStorage 是浏览器的“长期记忆”，数据除非主动删除，否则永久保存。它和 SessionStorage 的 API 完全一致，但用途更广。

1. 怎么用？

用法和 SessionStorage 一模一样：

// 存储用户偏好
localStorage.setItem('preferences', JSON.stringify({ theme: 'dark', fontSize: 'large' }))
// 读取偏好
const preferences = JSON.parse(localStorage.getItem('preferences'))

2. 特点

  • 容量适中：通常也是 5 MB，适合存复杂对象。
  • 永久存储：数据长期有效，除非手动清除。
  • 同源共享：同一域名下的所有页面都能访问。
  • 不发送到服务器：和 SessionStorage 一样，数据只在前端使用。

3. 应用场景

LocalStorage 适合需要长期保存的场景，比如：

  • 用户偏好：保存主题、字体大小等设置，提升用户体验。
  • 离线缓存：存储静态资源或接口数据，支持离线访问。
  • 状态持久化：在单页应用中，保存用户操作记录，刷新后恢复。

四、如何选择？看这三点

面对 Cookie、SessionStorage 和 LocalStorage，选择哪个主要看三件事：

  1. 数据存多久？
    • 临时数据用 SessionStorage。
    • 长期数据用 LocalStorage。
    • 需要精确控制过期时间或服务器参与的用 Cookie。
  2. 数据有多大？
    • 小数据（< 4 KB）用 Cookie。
    • 稍大数据（< 5 MB）用 SessionStorage 或 LocalStorage。
  3. 服务器要不要读？
    • 需要服务器读取的只能用 Cookie。
    • 纯前端操作的用 SessionStorage 或 LocalStorage。

五、最佳实践与注意事项

1. Cookie 的最佳实践

  • 加密敏感数据：避免直接存储明文，比如用户密码或令牌。
  • 设置合理过期时间：避免用户长时间未操作导致会话失效。
  • 指定路径和域：通过 path 和 domain 属性限制 Cookie 作用范围，增强安全性。
  • 使用 HttpOnly：防止 XSS 攻击，设置 HttpOnly 让 Cookie 无法被 JavaScript 访问。
// 设置安全的 Cookie
document.cookie = 'token=abc123; expires=' + date.toUTCString() + '; path=/; HttpOnly'

2. SessionStorage 和 LocalStorage 的最佳实践

  • 序列化复杂数据：存储对象或数组时，使用 JSON.stringify() 和 JSON.parse()。
  • 错误处理：读取数据时，检查是否为空或格式错误。
function safeGetItem(key) {
  const value = localStorage.getItem(key)
  try {
    return value ? JSON.parse(value) : null
  } catch (e) {
    console.error('解析数据失败:', e)
    return null
  }
}
  • 容量管理：监控存储空间，避免超出 5 MB 限制。
  • 清理无用数据：定期清除 LocalStorage 中过时的数据，防止浏览器变慢。

3. 安全与隐私

  • 避免存储敏感信息：LocalStorage 和 SessionStorage 容易被 XSS 攻击窃取，敏感数据应加密或用 Cookie 配合 HttpOnly。
  • 遵守隐私法规：如 GDPR 要求，获取用户同意后再存储 Cookie。
  • 跨浏览器兼容性：大部分现代浏览器都支持这三种存储方式，但老版本可能有限制，开发时要测试。

六、实际案例分析

假设你开发一个电商网站，需要实现以下功能：

  1. 记住用户登录状态：用 Cookie 存储会话 ID，设置 7 天过期，配合后端验证。
  2. 保存购物车：用 SessionStorage 临时存储购物车商品，关闭标签页后清空，避免数据泄露。
  3. 记录用户偏好：用 LocalStorage 保存用户的主题选择（如暗色模式），确保下次访问仍生效。

代码示例：

// 登录状态
function setLoginCookie(userId) {
  let date = new Date()
  date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000))
  document.cookie = 'userId=' + userId + '; expires=' + date.toUTCString() + '; path=/'
}

// 购物车
function updateCart(items) {
  sessionStorage.setItem('cart', JSON.stringify(items))
}

// 用户偏好
function setTheme(theme) {
  localStorage.setItem('theme', JSON.stringify({ mode: theme }))
}

七、拓展：其他存储方案

除了这三者，现代浏览器还提供了其他存储方式：

  • IndexedDB：适合存储大量结构化数据，支持复杂查询，容量更大（通常几十 MB 甚至更多）。
  • WebSQL：已废弃，但老项目可能还在用。
  • Service Worker + Cache API：适合缓存整个页面或资源，实现离线应用。

这些方案更适合特定场景，比如离线应用或数据库操作，但在简单场景下，Cookie、SessionStorage 和 LocalStorage 依然是主流选择。

八、总结

Cookie、SessionStorage 和 LocalStorage 各有优势，选对工具能让开发事半功倍：

  • Cookie：适合服务器交互和少量数据，安全性要求高时要加密。
  • SessionStorage：完美适配临时数据，标签页隔离让它更安全。
  • LocalStorage：长期存储的首选，适合用户偏好和缓存。

下次开发时，记得根据数据大小、生命周期和服务器需求来选择合适的存储方式。合理运用这三者，你的网页应用会更高效、更人性化！

目录